<template>
  <main>
    <header class="border-b-8 border-primary-500">
      <div class="h-8 bg-primary-500 leading-8">
        <div class="container h-full flex items-center justify-between text-3 text-gray-400">
          <div>
            <span class="">
              Hello Guest
            </span>
            <span class="ml-3 text-gray-300">
              <span class="underline">Sign In</span>
              <span class="ml-2 mr-1">/</span>
              <span class="underline">Register</span>
            </span>
          </div>
          <div class="flex items-center">
            <div class="i-carbon:email" />
            <span class="ml-1 font-bold">
              E-mail:
            </span>
            <span class="ml-1 text-gray-300">2514859445@qq.com</span>
          </div>
        </div>
      </div>
      <div class="container flex pt-3">
        <div class="flex items-center">
          <div class="h-60px w-104 f-c-c bg-primary-500 text-fill-1">
            公司iCON
          </div>
        </div>

        <div class="flex flex-col flex-1 items-end">
          <div class="w-fit flex b-g-primary-500">
            <input id="" placeholder="Please Input Part Number" class="w-110 pl-2 cus-input" type="text" name="">
            <div class="h-10 w-10 f-c-c cursor-pointer bg-primary-500 cus-btn">
              <div i-carbon:search text-fill-1 />
            </div>
          </div>
          <div class="mt-1 flex text-primary-500">
            <div class="flex">
              <div class="h-12 f-c-c cursor-pointer px-5">
                Home
              </div>
              <div class="h-12 f-c-c cursor-pointer px-5">
                About Us
              </div>
              <div class="h-12 f-c-c cursor-pointer px-5">
                Products
              </div>
              <div class="h-12 f-c-c cursor-pointer px-5">
                Manufacturers
              </div>
              <div class="h-12 f-c-c cursor-pointer px-5">
                Contact Us
              </div>
              <div class="h-12 f-c-c cursor-pointer px-5">
                RFQ/Quote
              </div>
            </div>
            <div class="ml-8 flex cursor-pointer items-center text-3">
              <div class="flex items-center bg-fill-3">
                <div class="h-7 w-7 f-c-c bg-active-500">
                  <div i-carbon:shopping-cart class="text-fill-1" />
                </div>
                <div class="flex cursor-pointer px-2">
                  <div>
                    My Request:
                  </div>
                  <div class="px-2 text-active-500">
                    0
                  </div>
                  <div>
                    Part
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <slot />
  </main>
</template>
